<template>
    <div>
        <!-- 上面还得给个评论才好！！！ -->
        <div v-for="msg, index in list" :key="index">
            <div class="message_wrap">
                <div class="reviewer">
                    <img class="img-h circle pointer" @click="toUserDetail(msg)" :src="msg.picUrl" alt="评论者头像">
                    <span @click="toUserDetail(msg)" class="reviewer_name font-12 pointerHover">{{ msg.nickname }}</span>
                    <span class="reviewer_time font-12">{{ msg.time }}</span>
                </div>
                <div class="content mtop-10">
                    <p>{{ msg.message }}
                    </p>
                    <div class="con_wrap">
                        <span class="dianzan pointerHover" @click="like(msg)">
                            <i v-if="!msg.like" class="iconfont icon-dianzan"></i>
                            <i v-else class="iconfont icon-dianzan3"></i>
                            {{ msg.support }}
                        </span>
                        <span class="mleft-20 pointerHover" @click="msg.remarkStatus = !msg.remarkStatus">{{
                            msg.remarkStatus
                            ? '收起' : '回复' }}</span>
                        <span class="mleft-20 pointerHover" @click="deleteComment(msg.id)"
                            v-show="isSame(msg.uuid)">删除</span><!-- 这个要判断是否是本人发的 -->
                        <span @click="save(msg)" class="report mleft-20 pointerHover">举报</span>
                    </div>
                    <Remark @publish="handlerReplay" :id="msg.id" v-if="msg.remarkStatus"></Remark>
                </div>
                <Message @reload="handlerReload" v-if="msg.response.length != 0" :response="msg.response" :listId="listId">
                </Message>
            </div>
            <div v-show="index !== list.length - 1"><el-divider content-position="right">{{ name }}</el-divider></div>
        </div>
        <!-- 一个隐藏的对话框！！！ -->
        <el-dialog title="举报" :visible.sync="dialogFormVisible">
            <el-form label-width="80px" :model="form">
                <el-form-item label="举报类型">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="谩骂造谣"></el-radio>
                        <el-radio label="广告传销"></el-radio>
                        <el-radio label="抄袭"></el-radio>
                        <el-radio label="诈骗"></el-radio>
                        <el-radio label="色情"></el-radio>
                        <el-radio label="暴力"></el-radio>
                        <el-radio label="反动"></el-radio>
                        <el-radio label="其他"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="举报详情">
                    <el-input type="textarea" placeholder="请详细描述，便于举报" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="report">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Remark from "@/components/simple/Remark.vue"
import Message from "@/components/simple/Message.vue"
import { addReply, delComment, support } from "@/api/api_playlist";
import { reportComment } from "@/api/api_admin";
export default {
    name: "messageList",
    props: ["list", "name", "listId"],
    components: {
        Remark,
        Message
    },
    data() {
        return {
            dialogFormVisible: false,
            form: {
                resource: '',
                desc: ''
            },
            dataSet: {
                reporterUuid: '',
                reporter: "",
                reportedUuid: '',
                reported: '',
                message: '',
                commentid: '',
                tag: '',
                reportdetail: ''
            }
        }
    },
    methods: {
        async handlerReplay(message, lastId) {
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            let res = await addReply(message, uuid, this.listId, lastId);
            //后端交互，成功给出提示！
            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.$emit("refresh")//再次获取！！！
            } else {
                this.$message.error(res.msg);
            }
        },
        isSame(originUid) {
            //本地的UUID
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            return uuid == originUid;
        },
        async deleteComment(id) {
            let res = await delComment(id);

            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.$emit("refresh")//再次获取！！！
            } else {
                this.$message.error(res.msg);
            }
        },
        handlerReload() {
            this.$emit("refresh")//再次获取！！！
        },
        async like(msg) {
            //本地的UUID
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            //调用方法
            let res = await support(msg.id, msg.like ? 0 : 1, uuid);
            this.$emit("refresh")//再次获取！！！
        },
        toUserDetail(item) {
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            if (uuid == item.uuid) this.$router.push("/userdetail/")
            else {//跳转到其他用户的详细信息界面
                this.$router.push("/userdetail/" + String(item.uuid));
            }
        },
        async report() {
            //将那个弹框显示出来！！！
            //进行消息的提交操作！！！
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            let nickname = JSON.parse(localStorage.getItem("profile")).data.nickname;
            this.dataSet.reporterUuid = uuid;
            this.dataSet.reporter = nickname;
            this.dataSet.tag = this.form.resource
            this.dataSet.reportdetail = this.form.desc

            let res = await reportComment(this.dataSet);
            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
            } else {
                this.$message.error(res.msg);
            }

            //提交举报成功后隐藏
            this.dialogFormVisible = false;
        },
        save(msg) {
            this.dialogFormVisible = true;
            //向dataSet中添加数据。
            this.dataSet.reported = msg.nickname;//被举报的昵称
            this.dataSet.message = msg.message;//别举报者的言论
            this.dataSet.commentid = msg.id;//被举报信息的id
            this.dataSet.reportedUuid = msg.uuid//被举报者的uuid
        }
    },
}
</script>

<style lang="less" scoped>
.message_wrap {
    background-color: rgba(244, 235, 235, 0.2);
    border-radius: 20px;
    padding: 5px;
}

.reviewer {
    height: 40px;
    position: relative;

    span {
        position: absolute;
        color: RGB(125, 125, 125);
    }

    .reviewer_name {
        top: 5px;
        left: 50px;

        .pointerHover:hover {
            cursor: pointer;
            color: RGB(35, 205, 150);
        }
    }

    .reviewer_time {
        bottom: 5px;
        left: 50px;
    }
}

.content {
    padding-left: 50px;

    .report {
        visibility: hidden;
    }

    &:hover .report {
        visibility: visible;
    }

    .con_wrap {

        .dianzan {
            i {
                font-size: 30px;
                height: 16px;
                position: relative;
                top: 4px;
            }
        }
    }

    p {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 600;
    }
}
</style>